<template>
    <div class="box personal_details" ref="UlDom">
        <!-- 此标签请勿删除， 不然无法下拉滚动，这是计算scroll height高度的容器 -->
        <div>
            <div class="flex top-hanlde-show flex-space-x">
                <div v-on:click="back">
                    <i class="iconfont left-i icon-fanhui"></i>
                </div>
                <div>
                    <em class="user-name">{{ userInfo.userName ? substr(userInfo.userName, 10) : '加载中' }}</em>
                </div>
                <div v-on:click="invite">
                    <i class="iconfont right-i  icon-fenxiang"></i>
                </div>
            </div>
            <div class="height-space"></div>
            <div class="user-profile-background"></div>
            <div class="user-profile">
                <div class="user-inner flex">
                    <div class="user-img">
                        <img class="user-img-ipc" v-on:click="catheadimg(userInfo.pictureUrl)" v-lazy="userInfo.pictureUrl" />
                    </div>
                    <div class="user-data-statistical flex flex-space-x">
                        <template 
                            v-if="loadUserInfoStatus === 1 || loadUserInfoStatus === 0"
                        >
                            <div class="loading-layout" 
                                v-for="(_, index) in new Array(3).fill()"
                                :key="index">
                                <p></p>
                                <p></p>
                            </div>
                        </template>
                        <template  v-if="loadUserInfoStatus === 2">
                            <div>
                                <p>{{userInfo.money}}</p>
                                <p>上月收入</p>
                            </div>
                            <div>
                                <p>{{userInfo.counts}}</p>
                                <p>接单数量</p>
                            </div>
                            <div>
                                <p>￥{{userInfo.ltTimePrice}}</p>
                                <p>6小时内/张</p>
                            </div>
                        </template>
                    </div>
                    <div v-on:click="star" class="star-box" v-if="!isStar">
                        <i class="iconfont icon-guanzhu"></i>
                        <p>关注</p>
                    </div>
                    <div v-on:click="star" class="star-box star-box-active" v-if="isStar">
                        <i class="iconfont icon-guanzhu"></i>
                        <p>已关注</p>
                    </div>
                </div>
            </div>
            <div class="tab-outside" ref="tabSticky">
                <div class="tab flex flex-sapce-x">
                    <div class="item" v-for="(item, index) in tabInfo.list" :key="index" v-on:click="switchOptions(index)">
                        <span :class="index === tabInfo.activeIndex ? 'active' : ''">{{item.name}}</span>
                    </div>
                </div>
                <div class="gap-line"></div>
            </div>
            <div class="show-inner">
                <WorkList :list="workList" :status="workStatus" v-show="tabInfo.activeIndex === 0" />
                <Introduction :data="introductionData" v-show="tabInfo.activeIndex === 1" />
                <Evaluation :nocomment="nocomment" :list="commentList" :score="commentScore" :grades="commentGrades" :isLast="commentLast" v-show="tabInfo.activeIndex === 2" />
                <Rules v-show="tabInfo.activeIndex === 3" />
            </div>
            <div class="button-box">
                <div class="button" v-on:click="selectDate">选择预约日期</div>
            </div>
            <div class="calendar-box">
                <calendar 
                    :nowD="new Date()" 
                    :close="calendarClose" 
                    :open="isOpTimes" 
                    :cb="nextPage" 
                    :fullDate="payOrderSelectDateFullDateArr"
                    :selecteds="selectDateSelectedArr"
                    :price="realPrice"
                />
            </div>
            <div class="xuqiuxiaoguo" v-if="showDemandList">
                <div class="mask" v-on:click="clickDemandMask"></div>
                <div class="inner">
                    <div class="quxiulibiao">
                        <div class="biaoti">请选择需求效果</div>
                        <div class="xuanxiang"
                         v-on:click="xuanzhexuqiuxiaoguo(item, index)" 
                         v-for="(item, index) in demandList" 
                         :class="[demandListChange.index === index ? 'xuanzelequxiuxiaoguo' : '', !item.flag ? 'bunengxuanzhexiaoguo' : '']"
                         :key="index">{{item.name}}</div>
                        <div class="xuanxiang" v-if="demandList.length === 0">加载中</div>
                        <div class="queding" v-on:click="quxiuxiaoguoquedingxuanzhe">确定</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import main from '.'
export default main
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>
